//节流函数和去抖函数本身没有减少事件的触发次数，而是控制事件处理函数的执行来减少实际逻辑处理过程，从而提高浏览器性能
//使用场景:在搜索框中根据 用户输入的文本搜索关联的内容并下拉展示，由于input是一个触发频率很高的事件，一般需要等到
// 用户停止输出文本一段时间后才开始请求接口查询数据
import {ref,watch} from "vue"
function debounce(cb, delay = 100){
  let timer = null
  return function(){
    clearTimeout(timer)
    let args = arguments,context = this;
    timer = setTimeout(()=>{
     cb.apply(context,args)
    },delay)
  }
}

export function useDebounce(cb, delay=100){
  const timer = ref(null);
  let handler = function(){
    clearTimeout(timer.value);
    let args = arguments,context = this;
    timer.value = setTimeout(()=>{
      cb.apply(context, args)
    },delay)
  }

  const cancel = () =>{
    clearTimeout(timer);
    timer.value = null
  }

  return {
    handler,
    cancel
  }
}


export function useAssociateSearch(){
  const keyword = ref('')
  const search = () =>{
    console.log('search...',keyword.value)
    //请求接口获取数据
  }
  //watch 原始逻辑，每次变化都请求
  watch(keyword, debounce(search,1000)) //去抖，停止操作1秒后再请求

  return {
    keyword
  }
}